<script setup>
	import {
		reactive,
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import LjLayout from "@/pages_nbst/components/lj-layout.vue"
	import tools from "/pages_nbst/utils/tools.js"
	import {
		getUserExamReq,
		getWrongPointStat1Req
	} from "/pages_nbst/api/my.js"

	let userId
	onLoad(q => {
		userId = q.id
		params.nbUserId = userId
		getUserExam()
		getPointStat()
	})

	const chartData = ref()
	const opts = reactive({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 10, 0, 15],
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			line: {
				type: "straight",
				width: 2,
				activeType: "hollow"
			}
		}
	})
	let examList = []
	const exam = reactive({
		id: 0,
		username: '',
		studentNum: '',
		rank: '',
		rankClass: '',
		rankSchool: '',
		score: '',
		score1: '',
		score2: ''
	})

	const getUserExam = (id) => {
		getUserExamReq({
			pageSize: 200,
			userId
		}).then(res => {
			const temp = {
				categories: [],
				series: [{
						name: "成绩",
						data: []
					},
					{
						name: "总排名",
						data: []
					},
					{
						name: "校区排名",
						data: []
					},
					{
						name: "班级排名",
						data: []
					},
				]
			}
			examList = res.list.map(v => {
				temp.categories.push(v.exam.label)
				temp.series[0].data.push(v.score)
				temp.series[1].data.push(v.rank)
				temp.series[2].data.push(v.rankSchool)
				temp.series[3].data.push(v.rankClass)
				return {
					id: v.id,
					label: v.exam.label,
					username: v.user.username,
					studentNum: v.user.student_num,
					rank: v.rank,
					rankClass: v.rank_class,
					rankSchool: v.rank_school,
					score: v.score,
					score1: v.score1,
					score2: v.score2
				}
			})
			if (examList.length > 0) {
				tools.resetData(exam, examList[0])
			}
			pickerList.value = [examList.map(v => v.label)]
			chartData.value = JSON.parse(JSON.stringify(temp))
		})
	}

	const pickerRef = ref()
	const pickerList = ref([
		[]
	])
	const pickerIndex = ref(0)
	const onClickOpenPicker = () => {
		pickerRef.value.open()
	}
	const onClickConfirmPicker = (e) => {
		console.log(e);
		pickerIndex.value = e.indexs[0]
		tools.resetData(exam, examList[e.indexs[0]])
	}

	const pointList = ref([])
	let params = {
		type: 0,
		nbUserId: 0,
	}
	const getPointStat = () => {
		getWrongPointStat1Req(params).then(res => {
			pointList.value = res
		})
	}
	const subPickerRef = ref()
	const subPickerList = ref([
		['教综', '专业']
	])
	const subPickerIndex = ref(0)
	const onClickOpenSubPicker = () => {
		subPickerRef.value.open()
	}
	const onClickConfirmSubPicker = (e) => {
		if (subPickerIndex.value !== e.indexs[0]) {
			subPickerIndex.value = e.indexs[0]
			params.type = e.indexs[0]
			getPointStat()
		}
	}
</script>

<template>
	<LjLayout>
		<view style="padding: 30rpx;display: flex;flex-direction: column;gap: 10rpx;">
			<view class="box">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="title">
						<image src="/pages_nbst/static/images/my/my-detail-icon1.png" mode="widthFix"
							class="title-img" />
						<view class="title-label">考试情况</view>
					</view>
					<view class="select-item" @click="onClickOpenPicker">
						{{pickerList[0][pickerIndex]}}
					</view>
				</view>
				<view class="module1-box">
					<view class="module1-item">
						<view class="module1-item-label1">{{exam.studentNum}}</view>
						<view class="module1-item-label2">{{exam.username}}</view>
					</view>
					<view class="module1-item"
						style="border-left: #dadbde 1rpx solid;border-right: #dadbde 1rpx solid;">
						<view class="module1-item-label1">教综分数</view>
						<view class="module1-item-label2">{{exam.score1}}</view>
					</view>
					<view class="module1-item">
						<view class="module1-item-label1">总分</view>
						<view class="module1-item-label2">{{exam.score}}</view>
					</view>
				</view>

				<view class="module1-box">
					<view class="module1-item">
						<view class="module1-item-label1">全省排名</view>
						<view class="module1-item-label2">{{exam.rank}}</view>
					</view>
					<view class="module1-item"
						style="border-left: #dadbde 1rpx solid;border-right: #dadbde 1rpx solid;">
						<view class="module1-item-label1">校区排名</view>
						<view class="module1-item-label2">{{exam.rankSchool}}</view>
					</view>
					<view class="module1-item">
						<view class="module1-item-label1">班级排名</view>
						<view class="module1-item-label2">{{exam.rankClass}}</view>
					</view>
				</view>

			</view>
			<view class="box" v-if="false">
				<view class="title">
					<image src="/pages_nbst/static/images/my/my-detail-icon2.png" mode="widthFix" class="title-img" />
					<view class="title-label">三大板块掌握情况</view>
				</view>
			</view>
			<view class="box">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="title">
						<image src="/pages_nbst/static/images/my/my-detail-icon3.png" mode="widthFix" class="title-img" />
						<view class="title-label">错误最高的10个知识点</view>
					</view>
					<view class="select-item" @click="onClickOpenSubPicker">
						{{subPickerList[0][subPickerIndex]}}
					</view>
				</view>
				<uv-list>
					<uv-list-item border v-for="item in pointList" :key="item.id">
						<view
							style="display: flex;justify-content: space-between;align-items: center;padding: 10rpx 20rpx;">
							<view style="color: #6f95c2;">{{item.label}}</view>
							<view style="color: #999999;">{{item.count}}道</view>
						</view>
					</uv-list-item>
				</uv-list>
			</view>
			<view class="box">
				<view class="title">
					<image src="/pages_nbst/static/images/my/my-detail-icon4.png" mode="widthFix" class="title-img" />
					<view class="title-label">考试成绩曲线</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view>
	</LjLayout>
	<uv-picker ref="pickerRef" :columns="pickerList" @confirm="onClickConfirmPicker"></uv-picker>
	<uv-picker ref="subPickerRef" :columns="subPickerList" @confirm="onClickConfirmSubPicker"></uv-picker>
</template>

<style scoped lang="scss">
	.box {
		background-color: white;
		border-radius: 10rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.title {
		color: #6f95c2;
		display: flex;
		align-items: center;

		.title-img {
			width: 40rpx;
			height: auto;
		}

		.title-label {
			font-weight: bolder;
		}
	}

	.module1-box {
		border: #dadbde 1rpx solid;
		display: flex;

		.module1-item {
			flex: 1 1 0;
			padding: 10rpx 0;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 4rpx;

			.module1-item-label1 {
				font-size: 26rpx;
				color: #999999;
			}

			.module1-item-label2 {
				font-size: 40rpx;
				color: #6f95c2;
			}
		}
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.select-item {
		border: 1rpx solid #6f95c2;
		border-radius: 10rpx;
		padding: 4rpx 30rpx;
		font-size: 24rpx;
		color: #6f95c2;
		max-width: 50vw;
	}
</style>

<style>
</style>